<template>
    <view>
        <u-navbar v-if="classname" placeholder :title="classname" leftIcon="arrow-left" bgColor="#ffffff"
            leftIconSize="25" autoBack>
        </u-navbar>

        <!-- 项目内容-->
        <mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" beforeEndDelay="2000" @init="mescrollInit"
            @down="downCallback" @up="upCallback">
            <view class="taglist">
            	<block v-for="(app, appindex) in AppList" :key="appindex">
            		<view class="newapk" @click="GoApk(app.id)">
            			<view class="newicon">
            				<u-image :src="app.appicon" width="125rpx" height="125rpx" radius="12" mode="widthFix"
            					loadingIcon="hourglass"></u-image>
            			</view>
            			<view class="newdetail">
            				<view class="newnum">
            					<u-text :text="app.appname"></u-text>
            				</view>
            				<view class="newnum">
            					<view>
            						<u-rate v-if="app.appmod==0" :value="1" size="15" :count="1" readonly
            							activeColor="#2469f6"></u-rate>
            						<u-rate v-else-if="app.appmod==1" :value="1" size="15" :count="1" readonly
            							activeColor="#1a9f35"></u-rate>
            					</view>
            					<view style="padding-top: 2px;">
            						<u-text :text="app.appstar" v-if="app.appmod==0" size="13" color="#2469f6"></u-text>
            						<u-text :text="app.appstar" v-if="app.appmod==1" size="13" color="#1a9f35"></u-text>
            					</view>
            					<u-text :text="app.appbb" size="13" style="margin-left: 10px;" color="#6c6c6c"></u-text>
            				</view>
            				<view class="newnum">
            					<text class="nomod" v-if="app.appmod==0">原版</text>
            					<text class="mod" v-else-if="app.appmod==1">MOD</text>
            					<view>
            						<u-text size="14" :text="app.appdata+'MB  · '+app.appdownnum+'次下载'" color="#6c6c6c"
            							lines="1"></u-text>
            					</view>
            				</view>
            			</view>
            			<view class="newbtn">
            				<u-tag text="下载" plainFill plain borderColor="rgba(00,00,00,0)" color="#2469f6"
            					shape="circle" @click="GoApk(app.id)"/>
            			</view>
            		</view>
            	</block>
            </view>
        </mescroll-body>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import API from '../../util/request.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                id: '',
                sleep: 0,
                AppList: [],
                classname: '加载中..',
                downloadTask: null,
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
                    autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
                    isLock: false, // 是否锁定下拉刷新,默认false;
                    offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
                    inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
                    minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
                    beforeEndDelay: 400, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
                    bgColor: "#f9f9f9", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                    textColor: "#2469f6", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                    textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
                    textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
                    textLoading: '加载中 ...' // 加载中的提示文本
                },
                upOption: {
                    use: true, // 是否启用上拉加载; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    isLock: false, // 是否锁定上拉加载,默认false;
                    isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10, // 每页数据的数量
                        time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                    },
                    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                    offset: 60, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
                    bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                    textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                    textLoading: '加载中 ...', // 加载中的提示文本
                    textNoMore: '-- 暂无更多 --', // 没有更多数据的提示文本
                    toTop: {
                        // 回到顶部按钮,需配置src才显示
                        src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
                        offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
                        duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
                        zIndex: 9990, // fixed定位z-index值
                        left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
                        width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                    },
                    empty: {
                        use: true, // 是否显示空布局
                        icon: "/static/nodata/post.png", // 图标路径
                        tip: '~ 暂无相关数据 ~', // 提示                		
                        fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
                        top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
                        zIndex: 99 // fixed定位z-index值
                    },
                    onScroll: true ,// 是否监听滚动事件
                    
                },
            }
        },
        onLoad(e) {
            this.id = e.id;
            this.classname = e.name;
        },
        methods: { 
            //下拉刷新
            downCallback() {
                this.mescroll.resetUpScroll();
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                var that = this;
                let pageNum = page.num; // 页码, 默认从1开始
				let limit = page.size;
                // console.log(that.sortapi)
                uni.request({
                    url: API.GetApkList()+'?appsortid='+that.id+'&sortOrder=desc&limit='+limit+'&page='+pageNum,
                    success: (res) => {   
                        var data = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
                        console.log(data)
						let curPageLen = data.data.length;
						if(page.num == 1) that.AppList = [];
						that.AppList = that.AppList.concat(data.data);
						that.mescroll.endByPage(curPageLen, data.msf); 
                    },
                    fail: (res) => {
                        console.log(res); 
                    }
                })
            },
			//跳转软件页
			GoApk(id) {
			    uni.navigateTo({
			        url: '/pages/ruanher/ruanherview?appid=' + id
			    })
			},
        }
    }
</script>

<style lang="scss">
    page {
    	background-color: #fff;
    }
    
    .taglist {
    	padding: 10px;
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: row;
    }
    
    .newapk {
    	width: 100%;
    	display: flex;
    	margin-top: 6px;
    	margin-bottom: 10px;
    	justify-content: space-between;
    }
    
    .newicon {
    	width: 125rpx;
    	height: 125rpx;
    	flex: 1;
    	border-radius: 14px;
    	border: #dcdcdc 1px solid;
    }
    
    .newdetail {
        flex: 4;
        margin-left: 0rpx;
        padding: 0rpx 16rpx 0rpx 16rpx;
    	display: flex;
    	flex-direction: column;
    }
    
    .newname {
    	color: #000000;
    	font-size: 18px;
    	overflow: hidden;
    	text-overflow: clip;
    	display: -webkit-box;
    	-webkit-line-clamp: 1;
    	-webkit-box-orient: vertical;
    }
    
    .newcontent {
    	color: #666666;
    	font-size: 13px;
    	overflow: hidden;
    	text-overflow: clip;
    	display: -webkit-box;
    	-webkit-line-clamp: 1;
    	-webkit-box-orient: vertical;
    }
    
    .newnum {
    	display: flex;
    	align-items: center;
		flex:1;
    }
    
    .nomod {
    	padding: 4px 10rpx;
    	margin-right: 16rpx;
    	border-radius: 6px;
    	background-color: #2469f6;
    	font-size: 9px;
    	color: #fff;
    }
    
    .mod {
    	padding: 4px 10rpx;
    	margin-right: 16rpx;
    	border-radius: 6px;
    	background-color: #1a9f35;
    	font-size: 9px;
    	color: #fff;
    }
    
    .newbtn {
    	flex: 1;
    	display: flex;
    	align-items: center;
    	justify-content: flex-end;
    }
</style>
